<template>
    <el-card class="card" shadow="Hover" style="text-align:left">
        <div style="margin-bottom:20px">
            <span style="float:left">
                页面：列表页
                <div style="margin-top: 6px; margin-bottom:20px">
                    <el-tag>文件名：{{ props.tableData.pagePrefix }}List.vue</el-tag>
                </div>
            </span>
            <span style="float:right">
                <el-button :icon="Download" link type="primary" size="small"
                    @click="onDownload('SINGLE_TABLE_CURD_PAGE_LIST' , false)">下载</el-button>
            </span>
        </div>
    </el-card>
    <el-card class="card" shadow="Hover" style="text-align:left">
        <div style="margin-bottom:20px">
            <span style="float:left">
                页面：详情
                <div style="margin-top: 6px; margin-bottom:20px">
                    <el-tag>文件名：{{ props.tableData.pagePrefix }}Edit.vue</el-tag>
                </div>
            </span>
            <span style="float:right">
                <el-button :icon="Download" link type="primary" size="small"
                    @click="onDownload('SINGLE_TABLE_CURD_PAGE_EDIT' , false)">下载</el-button>
            </span>
        </div>
    </el-card>
    <el-card class="card" shadow="Hover" style="text-align:left">
        <div >
            <span style="float:left">
                <div>接口：查询</div>
                <div style="margin-top: 6px; margin-bottom:20px">
                    <el-tag>路径：{{ props.tableData.interfacePrefix }}list</el-tag>
                </div>
            </span>

            <span style="float:right">
                <el-button :icon="Download" link type="primary" size="small"
                    @click="onDownload('SINGLE_TABLE_CURD_INTERFACE_LIST' , true)">下载</el-button>
            </span>
        </div>
    </el-card>
    <el-card class="card" shadow="Hover" style="text-align:left">
        <div style="margin-bottom:20px">
            <span style="float:left">
                接口：保存
                <div style="margin-top: 6px; margin-bottom:20px">
                    <el-tag>路径：{{ props.tableData.interfacePrefix }}save</el-tag>
                </div>
            </span>
            <span style="float:right">
                <el-button :icon="Download" link type="primary" size="small"
                    @click="onDownload('SINGLE_TABLE_CURD_INTERFACE_SAVE' , true)">下载</el-button>
            </span>
        </div>
    </el-card>
    <el-card class="card" shadow="Hover" style="text-align:left">
        <div style="margin-bottom:20px">
            <span style="float:left">
                接口：删除
                <div style="margin-top: 6px; margin-bottom:20px">
                    <el-tag>路径：{{ props.tableData.interfacePrefix }}delete</el-tag>
                </div>
            </span>
            <span style="float:right">
                <el-button :icon="Download" link type="primary" size="small"
                    @click="onDownload('SINGLE_TABLE_CURD_INTERFACE_DELETE' , true)">下载</el-button>
            </span>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const props = defineProps(['tableData'])

onMounted(() => {
    console.log(props.tableData);
})

// 下载
const onDownload = (templateCode: string , isJson:boolean) => {
    var inParm = {};
    for (let key in props.tableData) {
        inParm[key] = props.tableData[key];
    }
    //var inParm = props.tableData;
    inParm.fields = JSON.parse(props.tableData.fields)

    axios.post("/api/cg/generate",
        {
            'code': templateCode,
            'parm': inParm
        }).then(res => {
            //请添加执行成功后的业务代码 
            const filename = res.headers["content-disposition"];
            let resData = res.data;
            if(isJson){
                resData = JSON.stringify(res.data);
            }
            const blob = new Blob([resData]);

            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = decodeURIComponent(filename.split("filename")[1].substring(1, filename.split("filename")[1].length));
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
        });
}
</script>

<style>
.card {
    margin-bottom: 10px;
}
</style>